<!--其他事项弹窗-->
<template>
    <Modal :value="value" @input="handleInput" width="746" :closable="false" class-name="other-matter-modal">
        <div slot="header">
            其他事项
            <Icon class="f-fr" type="ios-close" @click="closeModel" />
        </div>
        <Form
            class="clearfix"
            :model="CustomsDeclareDate"
            :label-width="205"
            ref="CustomsDeclareDateRef"
            :rules="rule"
        >
            <FormItem label="特殊关系确认" prop="specialRelaConfirmed" class="specialRelaConfirmed">
                <RemoteSearch
                    :disabled="editORshow"
                    v-model="CustomsDeclareDate.specialRelaConfirmed"
                    placeholder="特殊关系确认"
                    :list="otherMatterData"
                    keywordFiled="label"
                    valueField="value"
                    :labelFieldList="['value', 'label']"
                ></RemoteSearch>
            </FormItem>
            <FormItem label="价格影响确认" prop="pricesConfirmed" class="pricesConfirmed">
                <RemoteSearch
                    :disabled="editORshow"
                    v-model="CustomsDeclareDate.pricesConfirmed"
                    placeholder="价格影响确认"
                    :list="otherMatterData"
                    keywordFiled="label"
                    valueField="value"
                    :labelFieldList="['value', 'label']"
                ></RemoteSearch>
            </FormItem>
            <FormItem label="与货物有关的特许权使用费支付确认" prop="paymentConfirmed" class="paymentConfirmed">
                <RemoteSearch
                    :disabled="editORshow"
                    v-model="CustomsDeclareDate.paymentConfirmed"
                    placeholder="与货物有关的特许权使用费支付确认"
                    :list="otherMatterData"
                    keywordFiled="label"
                    valueField="value"
                    :labelFieldList="['value', 'label']"
                    @on-enter="handleLastEnter"
                ></RemoteSearch>
            </FormItem>
        </Form>
        <div slot="footer" :class="[editORshow ? 'hide' : 'show']">
            <Button style="display: none" type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="submit">保存</Button>
        </div>
    </Modal>
</template>

<script>
import { nextFocus, focusIndexInput } from '@/libs/ivuDom'
import { on, off } from '@/libs/tools'
import RemoteSearch from '@/view/components/RemoteSearch'
export default {
    name: 'OtherMatterModal',
    components: {
        RemoteSearch
    },
    props: {
        value: {
            default: false,
            type: Boolean
        },
        otherMatter: {
            default: function () {
                return {
                    specialRelaConfirmed: '',
                    pricesConfirmed: '',
                    paymentConfirmed: '',
                    type: '',
                    editORshow: false
                }
            },
            type: Object
        }
    },
    data () {
        const validateItem = (rule, value, callback) => {
            if (this.type === 'JK' || this.type === 'JJ') {
                if (!value) {
                    callback(new Error('该项为必填项'))
                } else {
                    callback()
                }
            }
        }

        return {
            type: '',
            CustomsDeclareDate: {
                specialRelaConfirmed: '',
                pricesConfirmed: '',
                paymentConfirmed: ''
            },
            editORshow: '',
            otherMatterData: [
                { value: '0', label: '否' },
                { value: '1', label: '是' },
                { value: '9', label: '空' }
            ],
            rule: {
                specialRelaConfirmed: [
                    {
                        validator: validateItem,
                        trigger: 'change'
                    }
                ],
                pricesConfirmed: [
                    {
                        validator: validateItem,
                        trigger: 'change'
                    }
                ],
                paymentConfirmed: [
                    {
                        validator: validateItem,
                        trigger: 'change'
                    }
                ]
            }
        }
    },

    mounted () {
        this.init(this.otherMatter)
    },
    methods: {
        init (obj) {
            this.editORshow = obj.editORshow
            for (let i in obj) {
                this.CustomsDeclareDate[i] = obj[i]
            }
            this.type = obj.type
            this.bindInputKeyupEnterEvent()
        },

        closeModel () {
            this.inputs = []
            this.handleInput(false)
        },

        handleInput (v) {
            this.$emit('input', v)
        },

        submit () {
            if (this.type === 'JK' || this.type === 'JJ') {
                this.$refs['CustomsDeclareDateRef'].validate(valid => {
                    if (!valid) {
                        return false
                    }
                    this.$emit('saveOtherMatter', this.CustomsDeclareDate)
                    this.closeModel()
                })
            } else {
                this.$emit('saveOtherMatter', this.CustomsDeclareDate)
                this.closeModel()
            }
        },
        handleEnter (event) {
            if (event.keyCode === 13) {
                nextFocus(event, this.inputs)
            }
        },
        // 绑定表单回车切换input
        bindInputKeyupEnterEvent () {
            const formRef = this.$refs.CustomsDeclareDateRef
            if (formRef) {
                this.inputs = formRef.$el.querySelectorAll('input')
                off(formRef.$el, 'keyup', this.handleEnter)
                on(formRef.$el, 'keyup', this.handleEnter)
                this.$nextTick(() => {
                    this.value && focusIndexInput(0, this.inputs)
                })
            }
        },
        handleLastEnter (event) {
            event.target.blur()
            event.stopPropagation()
            this.$nextTick(() => {
                this.submit()
            })
        }
    } // methods end
}
</script>
